/**
 * A component for rendering information about a City model instance
 */
Ext.define('okcapital.widgets.CityPanel', {
    extend: 'portal.layer.querier.BaseComponent',

    /** Instance of Ext.data.Store of okcapital.model.Dataset instances*/
    datasetStore : null,
    
    /** Instance of okcapital.model.City*/
    city : null,
    
    /** Array of okcapital.model.DatasetRating objects*/
    datasetRatings : null,
    
    tabTitle : 'City',
    
    mazlowDatasets : null,
    mazlowTotals : null,
    mazlowRatings : null,

    constructor : function(cfg) {
        this.datasetStore = cfg.datasetStore;
        this.city = cfg.city;
        this.datasetRatings = cfg.datasetRatings;
        
        this.mazlowDatasets = [[], [], [], [], []];
        this.mazlowTotals = [0, 0, 0, 0, 0];
        this.mazlowRatings = [0, 0, 0, 0, 0];
        
        var items = [];
        
        //Generate averages for the mazlow pyramid based on every dataset for each level
        for (var i = 0; i < this.datasetRatings.length; i++) {
        	var dsr = this.datasetRatings[i];
        	var dataset = this.datasetStore.getById(dsr.get('datasetId'));
        	
        	if (dataset) {
        		var mazlowIndex = dataset.get('mazlowRank') - 1;
        		
        		this.mazlowDatasets[i].push(dataset);
        		this.mazlowTotals[mazlowIndex] += 1;
        		this.mazlowRatings[mazlowIndex] += dsr.get('rating');
        	}
        }
        
        var spriteConfigs = [];
        for (var i = 0; i < this.mazlowTotals.length; i++) {
        	var rating = 1.0;
        	if (this.mazlowTotals[i] > 0) {
        		rating = this.mazlowRatings[i] / this.mazlowTotals[i]; 
        	}
        	
        	spriteConfigs = spriteConfigs.concat(okcapital.widgets.MazlowUtil.generateMazlowSprites(
        			i, 
        			rating, 
        			Ext.bind(this.onMazlowClick, this), 
        			Ext.bind(this.onMazlowMouseover, this)));
        }
        
        Ext.apply(cfg, {
        	layout : 'fit',
        	title : this.city.get('name') + ' ratings relative to other cities',
        	border : false,
        	width : 600,
        	height : 280,
        	items : [{
        		xtype : 'draw',
        		items : spriteConfigs
        	}]
        });
        
        this.callParent(arguments);
    },
    
    onMazlowClick : function(sprite) {
    	var datasets = this.mazlowDatasets[sprite._mazlowLevel];
    	var items = [];
    	for (var i = 0; i < datasets.length; i++) {
    		items.push({
    			xtype : 'fieldset',
    			items : [{
    				xtype : 'displayfield',
    				fieldLabel : 'name',
    				value : datasets[i].get('name'),
    			},{
    				xtype : 'displayfield',
    				fieldLabel : 'description',
    				value : datasets[i].get('description'),
    			}]
    		})
    	}
    	
    	var popup = Ext.create('Ext.Window', {
    		title : 'Datasets sourcing ' + okcapital.widgets.MazlowUtil.mazlowNames[sprite._mazlowLevel],
    		width : 400,
    		height : 300,
    		items : items
    	});
    	
    	popup.show();
    },
    
    onMazlowMouseover : function() {
    	
    }
   


});